<template>
  <div class="form-container">
    <div class="container">
      <!--  主题内容标题   -->
      <div class="flex contain-header">
        <div class="contain-title">用户基本信息</div>
      </div>
      <!--  基本信息显示    -->
      <div class="info-contain">
        <div>
          <a-avatar :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+data.userFace" :size="70"/>
          <div class="userName">{{ data.userName }}</div>
          <div v-if="data.isFollowed === 0">
            <a-button type="primary" class="focus" @click="follow(data)">关注</a-button>
          </div>
          <div v-else>
            <a-button type="primary" class="focus" @click="cancelFollowed(data)">取消关注</a-button>
          </div>
        </div>
        <div class="info-content">
          <a-row type="flex" justify="center" :gutter="24" class="row-style">
            <a-col :span="8">
              <icon-svg name="iconhot" class="nav-icon"/>
              <div class="title text_center">帖子发起数</div>
              <div class="title text_center num-style">{{ data.postNum }}个</div>
            </a-col>
            <a-col :span="8">
              <icon-svg name="iconshoucang" class="nav-icon"/>
              <div class="title text_center">粉丝数</div>
              <div class="title text_center num-style">{{ data.fansNum }}个</div>
            </a-col>
            <a-col :span="8">
              <icon-svg name="iconguanzhu" class="nav-icon"/>
              <div class="title text_center">关注数</div>
              <div class="title text_center num-style">{{ data.followNum }}个</div>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" :gutter="24" class="row-style">
            <a-col :span="8">
              <span class="title">用户ID：</span>
              {{ data.userId }}
            </a-col>
            <a-col :offset="1" :span="7">
              <span class="title">真实姓名：</span>
              {{ data.userRealname }}
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" :gutter="24"  class="row-style">
            <a-col :span="8">
              <span class="title">性别：</span>
              {{ data.userSex === 1 ? '男' : '女'}}
            </a-col>
            <a-col :offset="1" :span="7">
              <span class="title">身份：</span>
              {{ data.userRole === 0 ? '学生' : '老师' }}
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" :gutter="24"  class="row-style">
            <a-col :offset="1" :span="8">
              <span class="title">学校：</span>
              {{ data.stSchool }}
            </a-col>
            <a-col :offset="1" :span="8">
              <span class="title">学院：</span>
              {{ data.stCollege }}
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" :gutter="24"  class="row-style">
            <a-col :span="8">
              <span class="title">班级：</span>
              {{ data.stClass }}
            </a-col>
            <a-col :offset="1" :span="7">
              <span class="title">学号：</span>
              {{ data.stNo }}
            </a-col>
          </a-row>
        </div>
        <div class="form-contain">
          <div class="form-title">收藏记录</div>
          <a-row type="flex" justify="center" :gutter="24" class="row-style">
            <a-col :span="8" class="border-right">
              <div class="title text_center">资料</div>
              <div class="title text_center num-style">{{ data.collectMatNum }}个</div>
            </a-col>
            <a-col :span="8" class="border-right">
              <div class="title text_center">课件</div>
              <div class="title text_center num-style">{{ data.collectCouNum }}个</div>
            </a-col>
            <a-col :span="8">
              <div class="title text_center">软件</div>
              <div class="title text_center num-style">{{ data.collectSofNum }}个</div>
            </a-col>
          </a-row>
        </div>
        <div class="form-contain record-space">
          <div class="form-title">资源上传记录</div>
          <a-row type="flex" justify="center" :gutter="24" class="row-style">
            <a-col :span="8" class="border-right">
              <div class="title text_center">资料</div>
              <div class="title text_center num-style">{{ data.resourceMatNum }}个</div>
            </a-col>
            <a-col :span="8" class="border-right">
              <div class="title text_center">课件</div>
              <div class="title text_center num-style">{{ data.resourceCouNum }}个</div>
            </a-col>
            <a-col :span="8">
              <div class="title text_center">软件</div>
              <div class="title text_center num-style">{{ data.resourceSofNum }}个</div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {cancelFollowResource, followResource, getUserDetail} from "@/api";
import { locale } from 'moment';
export default {
  name: "UserDetail",
  data() {
    return{
      data: {
        userName: 'Elaine cc',
        userId: '43645657',
        actualName: '苏奕娜',
        gender: '女',
        identity: '学生',
        university: '五邑大学',
        college: '智能制造学部',
        class: '200738班',
        classNumber: '3220000719',
        postsNum: '30',
        fansNum: '22',
        followsNum: '90'
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      let _this = this
      let params = {
        userId: this.$route.params.userId,
        userName: window.localStorage.getItem('userName')
      }
      getUserDetail(params)
        .then((res) => {
          if (res.status == 200) {
            _this.data = res.data
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        })
    },
    //关注粉丝
    follow(item) {
      let params = {
        followUserName: window.localStorage.getItem('userName'),
        followedUserName: item.userName
      }
      followResource(params)
          .then((res) => {
            if (res.status == 200){
              this.getInfo()
              this.$message.success('关注成功！')
              // this.getList()
            }
            else{
              this.$message.info(res.msg)
            }
          })
    },
    //取消关注粉丝
    cancelFollowed(item) {
      let params = {
        followUserName: window.localStorage.getItem('userName'),
        followedUserName: item.userName
      }
      cancelFollowResource(params)
          .then((res) => {
            if (res.status == 200){
              this.getInfo()
              this.$message.success('取消关注成功！')
              // this.getList()
            }
            else{
              this.$message.info(res.msg)
            }
          })
    }
  }
}
</script>

<style lang="less" scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .form-container {
    display: flex;
    justify-content: center;
  }
  .form-contain {
    width: 1600px;
    padding: 0px 30px 0px 30px;
    border-radius: 10px;
    border: 1px solid #5DD5C8;
    margin: 50px 0px;
  }
  .container{
    width: 1032px;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 5px 13px;
    margin: 50px 0px;
  }
  .contain-header{
    justify-content: space-between;
    align-items: center;
  }
  .contain-title{
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #1bcbb4;
  }
  .contain-left{
    align-items: center;
    cursor: pointer;
  }
  .title{
    font-weight: 600;
    font-size: 16px;
    margin-right: 10px;
  }
  .info-contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px !important;
    color: #686767;
  }
  .userName {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin-top: 8px;
  }
  .text_center {
    text-align: center;
  }
  .info-content {
    width: 600px;
  }
  .row-style {
    margin-top: 18px;
  }
  .nav-icon{
    color: #999999;
    font-size: 20px;
    text-align: center;
  }
  .num-style {
    color: #1bcbb4;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
  }
  .num-style:hover {
    color: #65dbcb;
  }
  .form-contain {
    width: 600px;
    padding: 0px 20px 20px 20px;
    border-radius: 10px;
    border: 1px solid #1bcbb4;
    margin: 50px 0px;
  }
  .form-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-bottom: 1px solid #97f3e9;
  }
  .border-right {
    border-right: 1px solid #d6dcdc;
  }
  .record-space {
    margin-top: 10px;
  }
</style>